<template>
  <view class="ai-reading">
    <view class="section-title">AI 阅读推荐</view>
    <scroll-view scroll-y="true" class="article-list">
      <view v-for="(article, index) in articles" :key="index" class="article-item">
        <image :src="article.imageUrl" class="article-image" />
        <view class="article-content">
          <text class="article-title">{{ article.title }}</text>
          <text class="article-summary">{{ article.summary }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    articles: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style>
.ai-reading {
  margin-top: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.article-list {
  height: 300px; /* 根据需要调整高度 */
  overflow: hidden;
}

.article-item {
  display: flex;
  margin-bottom: 10px;
}

.article-image {
  width: 100px; /* 根据需要调整宽度 */
  height: 100px; /* 根据需要调整高度 */
  margin-right: 10px;
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-title {
  font-size: 16px;
  font-weight: bold;
}

.article-summary {
  font-size: 14px;
  color: #666;
}
</style>
